//只能用来展示 不能有交互操作
import React, { Component } from 'react';
import { Table, Pagination, Row, Col } from 'antd';
import "./table.css";
import { Resizable } from 'react-resizable';
import '../../../node_modules/react-resizable/css/styles.css';

//列的宽度

const ResizeableTitle = (props) => {
    const { onResize, width, ...restProps } = props;
  
    if (!width) {
      return <th {...restProps} />;
    }
  
    return (
      <Resizable width={width} height={0} onResize={onResize}>
        <th {...restProps} />
      </Resizable>
    );
  };

class ResizTable extends Component {

    constructor(props) {
        super(props);

        this.state = {
            columns: this.props.columns
        }

    }

    components = {
        header: {
          cell: ResizeableTitle,
        },
    };

    handleResize = index => (e, { size }) => {
        this.setState(({ columns }) => {
          const nextColumns = [...columns];
          nextColumns[index] = {
            ...nextColumns[index],
            width: size.width,
          };
          return { columns: nextColumns };
        });
      };

    //页面正要加载
    componentWillMount() {

    }

    render() {
        const dispatch = this.props.dispatch;
        const columns = this.state.columns.map((col, index) => ({
            ...col,
            onHeaderCell: column => ({
                width: column.width,
                onResize: this.handleResize(index),
            }),
        }));
        const { isLoading, isRequest } = this.props;
        const total = this.props.total; // 获取数据总数
        const url = this.props.url; // 获取请求地址
        return (
                <div>
                    <Table
                        loading={ isLoading }
                        scroll={{ x: this.props.width }}
                        rowSelection= {this.props.rowSelection ? this.props.rowSelection : null}
                        columns={columns}
                        dataSource={this.props.dataSource}
                        components={this.components}
                    />
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 2px 20px 2px'  }}>
                        <div>
                           {
                               this.props.children
                           }
                        </div>
                        <Pagination 
                            showQuickJumper 
                            total={total}
                            showTotal={(total, range) => `第${range[0]}条到第${range[1]}条数据 总共 ${total} 条数据`}
                            onChange={(page, pageSize) => {
                                if(isRequest == 1) {
                                    dispatch({
                                        type: 'list/fetch',
                                        payload: {
                                            pageNum: page
                                        },
                                        url: url
                                    });
                                }
                            }}
                        />
                    </div>
                </div>
        );
    }

    componentDidMount() {
        
    }

    //有数据要更新
    componentWillReceiveProps(nextprops) {
        // this.props.tableLoading();
    }
}

export default ResizTable;